<template>
  <div class="all">
    <!-- <div v-for="(item,index) in items" :key="index">{{item.id}}</div> -->
    <el-popover
    placement="top-start"
    title="信息"
    width="200"
    trigger="hover"
    content="一号内容详情。">
    <div slot="reference"><span>1号</span></div>
  </el-popover>
  <el-popover
    placement="top-start"
    title="信息"
    width="200"
    trigger="hover"
    content="二号内容详情。">
    <div slot="reference"><span>2号</span></div>
  </el-popover>
  <el-popover
    placement="top-start"
    title="信息"
    width="200"
    trigger="hover"
    content="三号内容详情。">
    <div slot="reference"><span>3号</span></div>
  </el-popover>
  <el-popover
    placement="top-start"
    title="信息"
    width="200"
    trigger="hover"
    content="四号内容详情。">
    <div slot="reference"><span>4号</span></div>
  </el-popover>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>
<style scoped lang='scss'>
  .all{   
    width: 100%;
    border-collapse: collapse;
    div{
      float: left;
      width: 60px;
      height: 60px;
      box-sizing: border-box;
      border: 1px solid #eee;
      // border-left: 1px solid #000;
      span{
        display: inline-block;
        width: 100%;
        text-align: center;
        line-height: 60px;
      }
      span:hover{
        color: #fff;
        background-color: #0095FF;
      }
    }
  }
</style>
